<template>
	<view class="container">
        <view class="status_bar">
		            
		        </view>
		<view class="top" >
					 <u-icon size="50rpx" name="arrow-left" @click="toBack"></u-icon>
					 <text style="text-align: center;font-weight: bold;padding-left: 250rpx;">寻搭</text>
					 <!-- <u-icon size="50rpx" style="float: right;" name="plus" @click="addEvent"></u-icon> -->
		</view>
		<u-line></u-line>
		<input v-model="form.title" class="title-input" placeholder="标题" />
		<u-line></u-line>
		<textarea placeholder="详细说说活动内容和对伙伴的期待吧~" :auto-height="true" maxlength="-1" v-model="form.content"
			class="content-display"></textarea>
		<u-line></u-line>
		<!-- 上传图片 -->
		<block v-if="form.type == 1">
			<u-upload ref="uUpload" :size-type="['original', 'compressed']" name="files" :max-count="9" 
				:action="uploadImgUrl" @on-uploaded="submit" :auto-upload="false" height="200rpx" width="200rpx"></u-upload>
	
				
		
		</block> 

		<u-line></u-line>
		<!-- 新增标签 -->
		<view class="newTagContent">
			<view class="newTagName">
				<input class="newTagInput" type="text" v-model="tagName"
				 placeholder="添加寻搭标签" placeholder-style="font-size:14px;text-align:center;font-size: 25rpx;font-weight: 400;" />
			</view>
			<view class="newTagClick">
				<button class="newTagClickBtn" type="primary" size="default" @tap="createTags" style="font-size: 25rpx;font-weight: 400;">添加</button>
			</view>
		</view>
		<!--显示标签-->
		<view class="tagItemSelectContent">
			<view class="tagItemSelect" :key="idx" v-for="(tagText,idx) in form.labels">
				<view>
					<text :data-text="tagText">{{tagText}}</text>
				</view>
				<image class="select_delete" src="../../static/remove.png" 
				 :data-text="tagText"
				 @tap="removeLabel"></image>
			</view>
		</view>

        <view  class="choose-item">
			<u-icon class="icon add-icon" name="clock" color="#999" size="35"></u-icon>
			<text class="txt">添加时间</text>
			<view style="width: 350rpx;"></view>
			<u-switch class="u-icon" v-model="checked" active-color="#ff9d66" inactive-color="grey" size="30"   @change="chooseTime"></u-switch>
			<view v-show="checked==false" style="padding-left: 20rpx;font-size: 25rpx;font-weight: 400;">待定</view>
		</view>
		<view v-show="checked==true" style="padding-left: 80rpx;font-size: 25rpx;font-weight: 400;">{{form.startTime}}</view>
		<view>
			<uv-datetime-picker
				ref="datetimePicker1"
				v-model="value1"
				mode="datetime"
				@confirm="confirm"
				@cancel="cancel"
				@change="change"
				@close="close"
				round="20"
			></uv-datetime-picker>
		</view>
		<!-- 分类 -->

		<view  class="choose-item">
			<u-icon class="icon add-icon" name="map-fill" color="#999" size="35"></u-icon>
			<text class="txt">添加地点</text>
<!-- 			<u-switch class="u-icon" v-model="checked1" active-color="#ff9d66" inactive-color="grey" size="30"  @change="addlocation"></u-switch>
			<view v-show="checked1==false" style="padding-left: 20rpx;font-size: 30rpx;">待定</view> -->
		</view>
		<view  style="		display: flex;
		align-items: center;
		padding-left: 80rpx;padding-right: 100rpx;
		border-bottom: 1px solid #F5F5F5;justify-content: space-between;">
			<u-tag style="font-size: 25rpx;
			font-weight: 400;"  text="待定" :bg-color="tagcolorawait" color="black"  shape="circle" size="mini" @click="chooseawait"></u-tag>
			<u-tag style="font-size: 25rpx;
			font-weight: 400;" text="线上" :bg-color="tagcoloronline" color="black"  shape="circle" size="mini" @click="chooseonline"></u-tag>
			<u-tag style="font-size: 25rpx;
			font-weight: 400;" text="线下" :bg-color="tagcolordownline" color="black"  shape="circle" size="mini" @click="choosedownline"></u-tag>
		</view>
		<view v-show="checked1==true" style="padding-left: 50rpx;margin: 30rpx;font-size: 25rpx;font-weight: 400;">{{form.address}}</view>
		<view @click="chooseClass" class="choose-item">
			<u-icon class="icon add-icon" name="tags" color="#999" size="35"></u-icon>
			<text class="txt">{{ form.cateName || '选择帖子分区' }}</text>
			<u-icon class="u-icon" name="arrow-right"></u-icon>
		</view>
		<view class="choose-item">
			<u-icon class="icon add-icon" name="man-add" color="#999" size="35"></u-icon>
			<view class="txt">寻搭人数</view>
			<view style="width:100rpx;height: 40rpx; padding-top: 20rpx; text-align: center;background-color: gainsboro;margin-left: 20rpx;">
				<picker @change="bindPickerChange" :value="form.index" :range="array" >
				<view style="font-size: 25rpx;
			font-weight: 400;" >{{array[form.index]}}</view>
				</picker>
			</view>
			<view class="txt">人</view>
			
			</view>
			
		<view class="comprise">
			<checkbox-group @change="checkboxChange">
			<label>
			<checkbox :checked="state"  color="#000000" style="transform:scale(0.7)" />
			</label>
			</checkbox-group>
			<!-- <image :src="right" style="height: 30rpx; margin-left: 20rpx;margin-right: 20rpx;" mode="heightFix" @click="fillRight"> </image> -->
			<text style="margin-left: 10rpx;color:#ff9d66;font-size: 25rpx;font-weight: 400;margin-top: 10rpx;" @click="readSafety">安全承诺书 </text>
		</view>
		<view class="button-style" >
			<u-button v-if="form.type == 1" :custom-style="btnStyle" @click="uploadImg" shape="circle">寻找伙伴</u-button>
		</view>
		<u-popup :show="show" mode="center" :closeable='true' round="20rpx" customStyle="width: 500rpx;height: 800rpx;" close-icon-size="30rpx" :closeOnClickOverlay='true' @close="closefloat">
			<!-- <view style="padding-top:60rpx;font-size: 40rpx;font-weight: bold;text-align: center;padding-left: 40rpx;padding-right: 40rpx;">你想了解我的寻搭需求吗！</view>
			<view style="padding-top: 20rpx;padding-left: 40rpx;padding-right: 40rpx;">
			<u-button   color="#ffdf80" style="font-size: 40rpx;color: black;" @click="requestChat">请求聊天</u-button>
			
			</view> -->
			<scroll-view scroll-y="true" style="height: 600rpx;width: 400rpx;margin: auto;">
				
				<text style="font-size: 50rpx;font-weight: bold;text-align: justify;">一拍即合搭子活动 </text>
				<view>
				<text style="font-size: 50rpx;font-weight: bold;padding-left: 60rpx;">安全承诺书</text>
				</view>
				<text>我自愿参加本次搭子活动，并保证我的身体和心理状况适合参加本次搭子活动，对本次搭子活动的目的、性质、地点的情况以及可能的风险全部清楚了解。在我进行搭子活动期间，保证将自觉遵守国家法律法规。如出现下列情况，依据本承诺书和有关规定处理：
				1. 我的财物的遗失、被盗、毁坏等经济损失由本人承担；
				2. 由于我和搭子的过错、不可抗力、意外事件等导致的人身伤害，依据《中华人民共和国民典法》处理；
				3. 我实施的违法行为或违反活动地点各项规定以及民族习惯等行为所造成的损失和引起的法律责任由本人承担；
				4. 由于我的过错造成的第三方的人身伤害或经济损失由本人承担；
				
                </text>
			</scroll-view>
			<view style="padding-left: 20rpx;display: flex;padding-right: 20rpx;padding-bottom: 20rpx;">
				<checkbox-group style="padding-top: 20rpx;" @change="checkboxChange">
				<label>
				<checkbox :checked="state" borderColor="#ff9d66" color="#000000" />
				</label>
				</checkbox-group>
				<!-- <image :src="right" style="height: 30rpx; margin-left: 20rpx;margin-right: 20rpx;" mode="heightFix" @click="fillRight"> </image> -->
				<text style="margin-left: 10rpx;color:#ff9d66;font-size: 25rpx;font-weight: 400;margin-top: 10rpx;" >我已经详细阅读并认可本承诺书，对整体内容和各项规定均无异议 </text>
			</view>
			
		</u-popup>
	</view>
</template>

<script>
	import {  timeFormat} from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	export default {
		data() {
			return {
				tagName:'',
				tagList:[],
				
				btnStyle: {
					color: "#fff",
					backgroundColor: '#ff9d66'
				},
				// 后端上传图片路径
				state: false,
				uploadImgUrl: this.$c.domain + 'oss/upmutiload',
				form: {
					title: '',
					type: 1,
					content: '',
					media: [],
					longitude: 0,
					latitude: 0,
					address: '待定',
					cateName: '',
					startTime: "待定",
					labels:[],
					index:0,
				},
				
				location: '',
				// header: {
				// 	token: uni.getStorageSync('token')
				// },
				right: '../../static/right.png',
				checked: false,
				checked1: false,
				value1: Number(new Date().setSeconds(0)),
				tagcoloronline:"white",
				tagcolordownline:"white",
				tagcolorawait:"white",
				array: ['1', '2', '3', '4','5'],
				show:false
				
			};
		},
		onLoad(options) {
			// if (!uni.getStorageSync("hasLogin")) {
			// 	this.$u.toast('请先登录哦');
			// }
			// console.log(this.form.title);
		},
		methods: {
			createTags: function(){
				let newTag = this.tagName.trim();
				if(newTag==''){
					return false;
				}
				let index = this.form.labels.indexOf(newTag);
				this.tagName = '';
				if(newTag !== '' && index==-1){
					
					this.form.labels.push(newTag);
				}
			}, 
			//从标签库选择标签
			// selectLabel:function(e){
			// 	let select_value=e.target.dataset.text;
			// 	let index = this.selectList.indexOf(select_value);
			// 	if(index==-1){
			// 		//如果是-1，说明数组中没有对应的元素，这时可以添加
			// 		this.selectList.push(select_value);
			// 	}
			// },
			//从已选择列表中移除
			removeLabel:function(e){
				console.log(1)
				let select_value=e.target.dataset.text;
				let index = this.form.labels.indexOf(select_value);
				if (index > -1) {
					this.form.labels.splice(index, 1);
				}
			},
			chooseTime(){
				if(this.checked==true)
				{this.$refs[`datetimePicker1`].open()}
			},
			readSafety(){
			    this.show=true	
			},
			toBack(){
				uni.navigateBack()
			},
			closefloat(){
				this.show=false
			},
			bindPickerChange: function(e) {
			    // console.log('picker发送选择改变，携带值为', e.detail.value)
			    this.form.index = e.detail.value
				console.log(this.form.index)
			},
			confirm(e) {
				
				this.form.startTime=timeFormat(e.value,'yyyy-mm-dd hh:MM')
				// this.form.startTime=e.value
				
				console.log(this.form.startTime)
			},
			close() {
				console.log('close');
			},
			cancel() {
				console.log('cancel');
			},
		
			chooseonline(){
				
				this.tagcoloronline="#ff9d66"
				this.form.address="线上"
				this.tagcolordownline="white"
				this.tagcolorawait="white"
				
			},
			choosedownline(){
			
			this.tagcolordownline="#ff9d66"
			this.form.address="线下"
			this.tagcoloronline="white"
			this.tagcolorawait="white"
			this.checked1=true
			this.chooseLocation()
			
			
			
			},
			chooseawait(){
				this.tagcolorawait="#ff9d66"
				this.form.address="待定"
				this.tagcolordownline="white"
				this.tagcoloronline="white"
			},
			
			chooseLocation(){
				uni.chooseLocation({
				  success: res => {
				     this.form.address = res.name;
				     
				    console.log(res)
				  }
				})
			},
			checkboxChange(){
				this.state = !this.state;
				this.show=false
			},
			chooseClass() {
				uni.navigateTo({
					url: "category"
				})
			},
			uploadImg() {

				if (!this.form.content) {
					this.$u.toast('内容不能为空');
					return;
				}
				if (!this.form.title) {
					this.$u.toast('标题不能为空');
					return;
				}
				if(!this.state){
					this.$u.toast('安全承诺书未同意');
					return;
				}
				

				uni.showLoading({
					mask: true,
					title: '发布中'
				});
				this.$refs.uUpload.upload();
			},

			submit(e) {
				
				let mediaList = [];
				
				e.forEach(function(item, index) {
					
					mediaList.push(String(item.response.url));
					
				});

				this.form.media = mediaList;
				if(this.form.startTime=="待定"){this.form.startTime=null}
				this.form.labels=this.form.labels.toString()
               // 传递帖子表单到后端的接口
				this.$H.post('articles/add', this.form).then(res => {
					
					if(res.code == 200){
					uni.showToast({
						icon: "success",
						title: '发布成功',
						
						
					})
					setTimeout(function () {
					                        uni.reLaunch({
					                        	url:'/pages/partner/index'
					                        })
					                    }, 2000);
					
					
					
					}else{
					uni.showToast({
						icon: "none",
						title: '发布失败'
					})
					}
					// if (res.code == 0) {
					// 	uni.redirectTo({
					// 		url: '/pages/post/post?id=' + res.result
					// 	});
					// }
				
					
				});
				uni.hideLoading();
				// setTimeout(uni.switchTab({
				// 	url: '/pages/partner/index'
				// }), 1500);
			},
	
		}
	}
</script>

<style lang="scss" scoped>
	.status_bar {
	        height: var(--status-bar-height);
	        width: 100%;
	    }
	.tagItemSelectContent{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		height: auto;
		width: auto;
		
		overflow-y: scroll;
		border: 1px solid #F2F2F2;
		padding: 5rpx 5rpx 5rpx 5rpx;
		margin: 10rpx;
	}
	.tagItemSelect{
		display: flex;
		align-items: center;
		padding: 0 20upx 0 20upx;
		position: relative;
		font-size: 20rpx;
		margin:10rpx;
		height: 50rpx;
		background-color: #ff9d66;
		color: #FFFFFF;
		border-radius: 10px;
	}
	.select_delete{
		width: 15px;
		height: 15px;
		position: absolute;
		top: -6px;
		right:-7px;
	}
	.newTagContent{
		display: flex;
		justify-content: flex-start;
		margin: 20upx;
	}
	.newTagName{
		display: flex;
		align-items: center;
		width: 75%;
	}
	.newTagInput{
		border:1px solid #999999;
		font-size: 25rpx;
		width: 100%;
		height: 30px;
		border-radius: 20rpx;
	}
	.newTagClick{
		display: flex;
		align-items: center;
		margin-left: 40rpx;
	}
	.newTagClickBtn{
		height: 30px;
		
		background-color: #ff9d66;
		border-radius: 20rpx;
		font-size: 25rpx;
		
	}
	.top{
		display: flex;
		width: 100%;
		box-sizing: border-box;
		// justify-content: space-between;
		
	    align-items: center;
		height: 100rpx;
		padding: 0 0rpx;
		background-color: white;
		
	}
	.container{
		padding: 30rpx;
	    background-color: #ffffff;
		height: 100%;
	}
	.title-input {
		
		margin: 20rpx 0;
		padding: 20rpx 0;
	}
	.slot-btn {
			width: 341rpx;
			height: 140rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgb(244, 245, 246);
			border-radius: 10rpx;
		}
	.comprise {
		display: flex;
		margin-top: 20rpx;
	}
	.slot-btn__hover {
			background-color: rgb(235, 236, 238);
		}

	.content-display {
		width: 100%;
		padding: 20rpx 0;
		min-height: 300rpx;
	}

	.choose-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1px solid #F5F5F5;

		// &:last-child {
		// 	border: 0;
		// }

		.txt {
			margin-left: 20rpx;
			font-size: 25rpx;
			font-weight: 400;
		}

	

	

		.icon {
			width: 40rpx;
			height: 40rpx;
		}

		.u-icon {
			margin-left: auto;
			// align-self: flex-end;
			color: #999;
		}

		.add-icon {
			margin-left: 0;
		}
	}

	.button-style {
		margin-top: 50rpx;
		color: #ff9d66;
	}
</style>
